/* คอนเทนเนอร์หลักและพื้นหลังเว็บ */
/* ==========================================
   แถบความคืบหน้า (Progress Bar) - Dark Mode
   ========================================== */
.valuation-container {
  width: 100%;
  max-width: 800px; /* ขยับให้เท่ากับขนาดการ์ดฟอร์มหลัก */
  margin: 0 auto 24px auto; /* เว้นระยะห่างด้านล่างก่อนเข้าการ์ดฟอร์ม */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 8px;
}

/* สไตล์แต่ละขั้นตอน (Step) */
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #8b949e; /* สีเทาเข้มสำหรับขั้นตอนที่ยังไม่ถึง */
  white-space: nowrap;
}

/* ตัวเลขในวงกลม <span> */
.step span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #21262d; /* พื้นหลังวงกลมปกติ */
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 13px;
  font-weight: 600;
}

/* เส้นเชื่อมระหว่างขั้นตอน */
.step-line {
  flex-grow: 1;
  height: 2px;
  background-color: #30363d; /* สีเส้นเชื่อมปกติ */
  margin: 0 16px;
}

/* ------------------------------------------
   สไตล์เมื่อขั้นตอนนั้นกำลังทำงาน (Active)
   ------------------------------------------ */
.step.active {
  color: #58a6ff; /* สีข้อความไฮไลท์น้ำเงินสด */
  font-weight: 600;
}

.step.active span {
  background-color: #1f293d; /* พื้นหลังวงกลมไฮไลท์ */
  border-color: #58a6ff;
  color: #58a6ff; /* สีตัวเลขไฮไลท์ */
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.2); /* เพิ่มออร่าเรืองแสงเบาๆ */
}

/* ------------------------------------------
   สไตล์เมื่อขั้นตอนนั้นผ่านไปแล้ว (กรณีทำเสร็จแล้ว)
   ------------------------------------------ */
.step.completed {
  color: #2ea043; /* เปลี่ยนเป็นสีเขียวถ้าต้องการ */
}

.step.completed span {
  background-color: #238636;
  border-color: #2ea043;
  color: #ffffff;
}

/* แสดงผลบนหน้าจอมือถือ (ซ่อนข้อความ เหลือแต่วงกลมและเส้นเชื่อมเพื่อให้ไม่เบียดกัน) */
@media (max-width: 576px) {
  .step {
    font-size: 0; /* ซ่อนข้อความตัวอักษร */
    gap: 0;
  }
  .step.active {
    font-size: 12px; /* ให้แสดงเฉพาะข้อความของขั้นตอนที่กำลังทำอยู่ */
  }
  .step-line {
    margin: 0 8px;
  }
}

body {
  background-color: #0f1115;
  color: #e2e8f0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 20px;
}

.valuation-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

/* สไตล์การ์ดฟอร์มหลัก */
.valuation-card {
  background-color: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* หัวข้อขั้นตอน */
.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #58a6ff;
  margin-top: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* จัดระเบียบเส้นคั่นฟอร์ม (hr) */
hr {
  border: 0;
  height: 1px;
  background: #30363d;
  margin: 32px 0;
}

/* --- [ขั้นตอนที่ 1] ส่วนกรอกข้อมูลสเปก --- */
.form-group-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label, .input-label {
  font-size: 14px;
  font-weight: 500;
  color: #8b949e;
}

/* สไตล์ Select และ Inputs */
.form-group select {
  width: 100%;
  padding: 12px;
  background-color: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  color: #c9d1d9;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.form-group select:focus, textarea:focus {
  border-color: #58a6ff;
}

/* ถอด Inline Style เดิมของ Textarea แล้วมาคุมที่นี่แทน */
textarea#spec_details {
  width: 100%;
  box-sizing: border-box;
  background-color: #21262d !important;
  border: 1px solid #30363d !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 12px !important;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

/* --- [ขั้นตอนที่ 2] ตัวเลือกสภาพ (Condition List) --- */
.condition-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* ทำลิสต์ตัวเลือกให้เหมือนกล่องการ์ดเพื่อให้กดง่ายขึ้น */
.condition-list label {
  background-color: #21262d;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 16px;
  display: block;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* เมื่อขยับเมาส์มาโดน หรือเมื่อเช็คบล็อกถูกเลือก */
.condition-list label:hover {
  border-color: #444c56;
  background-color: #262c36;
}

.condition-list input[type="radio"]:checked + label {
  border-color: #58a6ff;
  background-color: #1f293d;
}

/* จัดตัวหนังสือคำอธิบายด้านใน */
.condition-list strong {
  display: block;
  color: #58a6ff;
  font-size: 15px;
  margin-bottom: 4px;
}

.condition-list span {
  font-size: 13px;
  color: #8b949e;
}

/* --- ส่วนอัปโหลดรูปภาพ (Upload Section) --- */
.upload-section {
  background-color: #1f242c;
  border: 2px dashed #444c56;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  margin-top: 12px;
}

.upload-section input[type="file"] {
  background-color: #21262d;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 8px 12px;
  color: #c9d1d9;
  cursor: pointer;
}

.upload-section p {
  font-size: 13px;
  color: #8b949e;
  margin: 12px 0 0 0;
}

/* --- ข้อความชี้แจงและหมายเหตุตอนท้าย --- */
.valuation-card p {
  font-size: 13px;
  color: #8b949e;
  line-height: 1.6;
}

/* ส่วนปุ่มกดส่งฟอร์ม */
.price-box {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.price-box button {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}

/* ปุ่มหลักส่งข้อมูล */
.price-box button[type="submit"] {
  background-color: #238636;
  color: #ffffff;
}

.price-box button[type="submit"]:hover {
  background-color: #2ea043;
}

/* ปุ่มย้อนกลับ */
.price-box button.btn-back {
  background-color: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
}

.price-box button.btn-back:hover {
  background-color: #30363d;
}

/* หน้าจอพกพา (Responsive) */
@media (max-width: 600px) {
  .form-group-grid {
    grid-template-columns: 1fr;
  }
  .valuation-card {
    padding: 16px;
  }
}

/* ==========================================
   2. ส่วนอัปโหลดรูปภาพ (Upload Section)
   ========================================== */
.upload-section {
  margin-top: 24px;
}

/* พื้นที่ลากวางไฟล์ (Dropzone) */
.upload-dropzone {
  border: 2px dashed #444c56;
  border-radius: 8px;
  padding: 32px 20px;
  text-align: center;
  background-color: #1f242c;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease-in-out;
  margin-top: 10px;
}

/* เอฟเฟกต์เมื่อ Hover หรือลากไฟล์มาวาง */
.upload-dropzone:hover {
  border-color: #58a6ff;
  background-color: #242b35;
}

/* ซ่อน input file ของจริง เพื่อความสวยงาม */
.file-hidden {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ไอคอนอัปโหลด (สามารถใส่เป็น SVG หรือ Emoji ใน HTML ได้) */
.upload-icon {
  font-size: 28px;
  margin-bottom: 12px;
  color: #8b949e;
}

/* ข้อความใน Dropzone */
.upload-text {
  font-size: 14px;
  color: #c9d1d9;
  margin: 0 0 4px 0;
}

.upload-text strong {
  color: #58a6ff;
}

.upload-subtext {
  font-size: 12px;
  color: #8b949e;
  margin: 0;
}

/* กล่องพรีวิวรูปภาพที่อัปโหลด (Preview Gallery) */
.preview-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.preview-gallery img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #30363d;
}


/* ==========================================
   ส่วนราคากลางและการประเมิน (Price Box)
   ========================================== */
.price-box.central-evaluation {
  background-color: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 20px;
  margin-top: 24px;
  text-align: center;
}

.price-box-title {
  font-size: 14px;
  color: #8b949e;
  margin: 0 0 8px 0;
}

/* ข้อความตัวใหญ่กลางฟอร์ม */
.price-amount-text {
  font-size: 16px;
  font-weight: 600;
  color: #58a6ff;
  margin-bottom: 12px;
}

/* หมายเหตุตัวเล็กด้านล่าง */
.price-note-text {
  font-size: 12px;
  color: #8b949e;
  line-height: 1.5;
  margin: 0;
}


/* ==========================================
   กลุ่มปุ่มกด (Button Group)
   ========================================== */
.btn-group {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

/* สไตล์ปุ่มพื้นฐาน */
.btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ปุ่มย้อนกลับ (Secondary) */
.btn-secondary {
  background-color: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
}

.btn-secondary:hover {
  background-color: #30363d;
}

/* ปุ่มยืนยัน/ส่งข้อมูล (Primary) */
.btn-primary {
  background-color: #238636;
  color: #ffffff;
  flex-grow: 1; /* ให้ปุ่มยืนยันยาวเด่นกว่า */
}

.btn-primary:hover {
  background-color: #2ea043;
}

/* ขยับให้สอดคล้องกับหน้าจอเล็ก */
@media (max-width: 480px) {
  .btn-group {
    flex-direction: column-reverse; /* จอมือถือให้ปุ่มยืนยันอยู่ด้านบน ปุ่มย้อนกลับอยู่ล่าง */
  }
  .btn {
    width: 100%;
  }
}